<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <script src="../lib/flexible.js"></script>
    <link rel="stylesheet" href="../lib/vant.css" />
    <link rel="stylesheet/less" href="../style/index.less" />
    <script src="../lib/less.min.js"></script>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vant.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/base64.min.js"></script>
    <script ignore src="../js/env.js"></script>
    <script ignore src="../js/utils.js"></script>
    <script src="../js/moment.min.js"></script>
    <title>出梁</title>
  </head>
  <body>
    <div id="app">
      <div class="home-flowPath-container">
        <div
          class="nav-bar-container"
          :style="{
        paddingTop: (client == 'App' ? statusBarHeight || 20 : 0) + 'px',   
        background: '#385AF9',
      }"
        >
          <van-nav-bar
            @click-left="onClickBack($event)"
            left-arrow
            :style="{ background: '#385AF9'}"
          >
            <template #left>
              <van-icon name="arrow-left" :size="22" color="#FFFFFF" />
            </template>
            <template #title>
              <div class="van-nav-bar-title" :style="{ color: '#FFFFFF' }">
                {{operate == 'chuLiang'?'出梁':operate == 'cunLiang'?'存梁':''}}
              </div>
            </template>
          </van-nav-bar>
        </div>
        <div class="submit-form-container">
          <van-form @submit="onSubmit">
            <!-- 出梁 -->
            <template v-if="operate == 'chuLiang'">
              <!-- <div class="select-picker-container">
                <van-field
                  readonly
                  placeholder="请选择"
                  input-align="right"
                  error-message-align="right"
                  :value="approve.ylStartTime"
                  @click="jlStartPicker = true"
                  required
                  :rules="[{ required: true, message: '请选择出梁开始时间' }]"
                >
                  <template #label> 出梁开始时间 </template>
                </van-field>
                <div
                  class="icon"
                  :class="[jlStartPicker && 'show']"
                  @click="jlStartPicker = true"
                >
                  <van-icon name="arrow" color="#B9BCC5" :size="22" />
                </div>
                <van-popup v-model="jlStartPicker" position="bottom">
                  <van-datetime-picker
                    @confirm="onJlStartDateConfirm"
                    @cancel="jlStartPicker = false"
                    v-model="jlStartDate"
                  />
                </van-popup>
              </div> -->
              <div class="select-picker-container">
                <van-field
                  readonly
                  placeholder="请选择"
                  input-align="right"
                  error-message-align="right"
                  :value="approve.ylEndTime"
                  @click="jlEndPicker = true"
                  required
                  :rules="[{ required: true, message: '请选择出梁时间' }]"
                >
                  <template #label> 请选择出梁时间 </template>
                </van-field>
                <div
                  class="icon"
                  :class="[jlEndPicker && 'show']"
                  @click="jlEndPicker = true"
                >
                  <van-icon name="arrow" color="#B9BCC5" :size="22" />
                </div>
                <van-popup v-model="jlEndPicker" position="bottom">
                  <van-datetime-picker
                    @confirm="onJlEndDateConfirm"
                    @cancel="jlEndPicker = false"
                    v-model="jlEndDate"
                    type="date"
                  />
                </van-popup>
              </div>
            </template>
            <!-- 存梁 -->
            <template v-if="operate == 'cunLiang'">
              <div class="select-picker-container">
                <van-field
                  readonly
                  placeholder="请选择"
                  input-align="right"
                  error-message-align="right"
                  :value="approve.storageAreaDesc"
                  @click="approve.clVisible = true"
                  required
                  :rules="[{ required: true, message: '请选择存梁位置' }]"
                >
                  <template #label>存梁位置</template>
                </van-field>
                <div
                  class="icon"
                  :class="[approve.clVisible && 'show']"
                  @click="approve.clVisible = true"
                >
                  <van-icon name="arrow" color="#B9BCC5" :size="22" />
                </div>
                <van-popup v-model="approve.clVisible" position="bottom">
                  <van-picker
                    value-key="areaDesc"
                    show-toolbar
                    :columns="approve.clSource"
                    @confirm="clConfirm($event)"
                    @cancel="approve.clVisible = false"
                  />
                </van-popup>
              </div>
              <div class="select-picker-container">
                <van-field
                  readonly
                  placeholder="请选择"
                  input-align="right"
                  error-message-align="right"
                  :value="approve.scwcsj"
                  @click="clPicker = true"
                  required
                  :rules="[{ required: true, message: '请选择存梁时间' }]"
                >
                  <template #label> 存梁时间 </template>
                </van-field>
                <div
                  class="icon"
                  :class="[clPicker && 'show']"
                  @click="clPicker = true"
                >
                  <van-icon name="arrow" color="#B9BCC5" :size="22" />
                </div>
                <van-popup v-model="clPicker" position="bottom">
                  <van-datetime-picker
                    @confirm="onClDateConfirm"
                    @cancel="clPicker = false"
                    v-model="clDate"
                    type="date"
                  />
                </van-popup>
              </div>
            </template>
            <van-button round block class="submit-button" native-type="submit">
              提交
            </van-button>
          </van-form>
        </div>
      </div>
    </div>
  </body>
</html>
<script type="module">
  var app = new Vue({
    el: "#app",
    data() {
      return {
        statusBarHeight: 0,
        client: "",
        //存梁
        clInfo: {},
        clPicker: false,
        clDate: new Date(),
        //出梁
        jlInfo: {},
        jlStartPicker: false,
        jlStartDate: new Date(),
        jlEndPicker: false,
        jlEndDate: new Date(),
        approve: {
          //存梁
          scwcsj: "",
          clSource: [],
          clVisible: false,
          storageArea: "",
          storageAreaDesc: "",
          //出梁
          ylStartTime: "",
          ylEndTime: "",
        },
        rows: {},
        operate: "",
      };
    },
    mounted() {
      let { statusBarHeight, client } = getLoginData();
      this.client = client;
      if (client == "App") {
        this.statusBarHeight = statusBarHeight;
      } else {
        this.statusBarHeight = 0;
      }
      this.rows = JSON.parse(localStorage.getItem("ROW_DATA"));
      this.operate = localStorage.getItem("operate");
      Promise.all([this.getDetail(), this.getPosition()]).finally((_) => {});
    },
    methods: {
      onClickBack() {
        window.history.back();
      },
      onSubmit() {
        let that = this;
        that.$toast.loading({
          duration: 0,
          forbidClick: true,
          message: "数据提交中",
        });
        let { id, controlId } = that.rows;
        let { ylStartTime, ylEndTime, scwcsj, storageArea } = that.approve;
        let { token, tenantCode, userId } = getLoginData();
        //出梁
        if (that.operate == "chuLiang") {
          return new Promise((resolve, reject) => {
            axios({
              method: "POST",
              headers: {
                Authorization: `Bearer ${token}`,
                Tenantcode: tenantCode,
                userId,
              },
              url: `${YX_BASE_API_URL}/beam/lcTaskManager/saveJqTime?id=${id}&ylEndTime=${ylEndTime}`,
              responseType: "json",
            })
              .then((res) => {
                setTimeout(() => {
                  that.onClickBack();
                }, 100);
              })
              .catch((_) => {
                that.$toast.fail("操作失败");
              })
              .finally((_) => {
                that.$toast.clear();
              });
          });
        }
        //存梁
        if (that.operate == "cunLiang") {
          axios({
            method: "POST",
            headers: {
              Authorization: `Bearer ${token}`,
              Tenantcode: tenantCode,
              userId,
            },
            url: `${YX_BASE_API_URL}/beam/lcTaskManager/approveOrder?controlId=${controlId}`,
            responseType: "json",
            data: {
              scwcsj,
              storageArea,
            },
          })
            .then((res) => {
              setTimeout(() => {
                that.onClickBack();
              }, 100);
            })
            .catch((_) => {
              that.$toast.fail("操作失败");
            })
            .finally((_) => {
              that.$toast.clear();
            });
        }
      },

      //查询存梁位置
      getPosition() {
        let { token, tenantCode, userId } = getLoginData();
        return new Promise((resolve, reject) => {
          let { id } = this.rows;
          axios({
            method: "GET",
            headers: {
              Authorization: `Bearer ${token}`,
              Tenantcode: tenantCode,
              userId,
            },
            url: `${YX_BASE_API_URL}/beam/lcTaskManager/getYiLiangInfo`,
            responseType: "json",
            params: { id },
          })
            .then((res) => {
              let {
                data: { data },
              } = res;
              this.approve["clSource"] = data?.result ?? [];
              resolve();
            })
            .catch((_) => {
              this.approve["clSource"] = [];
              reject();
            });
        });
      },

      //查询详情
      getDetail() {
        let { token, tenantCode, userId } = getLoginData();
        let { id } = this.rows;
        return new Promise((resolve, reject) => {
          axios({
            method: "POST",
            headers: {
              Authorization: `Bearer ${token}`,
              Tenantcode: tenantCode,
              userId,
            },
            url: `${YX_BASE_API_URL}/beam/lcTaskManager/getDetail?id=${id}`,
            responseType: "json",
          })
            .then((res) => {
              let {
                data: { data },
              } = res;
              this.approve.storageArea = data.result?.storageArea || "";
              this.approve.storageAreaDesc = data.result?.storageAreaDesc || "";
            })
            .catch((_) => {
              this.approve.storageArea = "";
              this.approve.storageAreaDesc = "";
            });
        });
      },

      //出梁
      onJlStartDateConfirm(value) {
        this.approve.ylStartTime = moment(new Date(value)).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.jlStartPicker = false;
      },
      onJlEndDateConfirm(value) {
        this.approve.ylEndTime = moment(new Date(value)).format("YYYY-MM-DD");
        this.jlEndPicker = false;
      },

      //存梁
      clConfirm(ev) {
        let { id = "", areaDesc = "" } = ev;
        this.approve.storageArea = id;
        this.approve.storageAreaDesc = areaDesc;
        this.approve.clVisible = false;
      },

      onClDateConfirm(value) {
        this.approve.scwcsj = moment(new Date(value)).format("YYYY-MM-DD");
        this.clPicker = false;
      },
    },
  });
</script>
